import deepHelper from '@/utils/book'
export default {
  data() {
    return {
      // 控制公告的显示隐藏
      showNotice: true,
      // 控制按钮排的背景颜色
      className: 'draft',
      // 控制表单标题的宽度
      labelWidth: '120px',
      // 决定书型菜单配置 决定了显示的内容和子树
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 表单校验的规则
      rules: {
        // title:{
        //   trigger:"blur",
        //   validator(rule, value, callback){
        //     if(value === ""){
        //       callback(new Error('请输入书名'));
        //     }else{
        //       callback()
        //     }
        //   }
        // },
        title: { required: true, message: '请输入书名', trigger: 'blur' },
        coverURL: { required: true, message: '请输入封面路径', trigger: 'blur' },
        creator: { required: true, message: '请输入作者', trigger: 'blur' },
        language: { required: true, message: '请输入书籍语言', trigger: 'blur' },
        name: { required: true, message: '请输入上传后的名字', trigger: 'blur' },
        publisher: { required: true, message: '请输入出版社', trigger: 'blur' },
        rootUrl: { required: true, message: '请输入电子书根路径', trigger: 'blur' },
        unzipURL: { required: true, message: '请输入解压路径', trigger: 'blur' },
        url: { required: true, message: '请输入电子书地址', trigger: 'blur' }
      }
    }
  },
  computed: {
    // 渲染章节目录的
    treeData() {
      // 如果flow为空 则不用走任何逻辑
      // 一定要对flow进行浅拷贝  不要去影响data里的flow（data中的flow是响应式数据 一旦操作界面会联动！！ 性能太低 还有可能影响页面逻辑）
      if (this.book.flow === undefined || this.book.flow.length === 0) return []

      let flow = [...this.book.flow]
      // 如果flowbu不为空 则渲染tree
      const { label, children } = this.defaultProps
      // 过滤掉所有非法的目录（章节）数据！
      flow = flow.filter(item => item.level !== undefined && item.title !== undefined)
      // 造一本多级目录的电子书（以test.epub为例）
      // flow = flow.map((item,index)=>{
      //   item.level = index;
      //   return item;
      // })
      // 渲染tree
      deepHelper.chapters = []
      deepHelper.wrapId = -1
      deepHelper.level = -1
      deepHelper(flow, label, children, flow)
      return deepHelper.chapters
    }
  },
  methods: {
    // 公告的显示与隐藏
    switchNotice() {
      this.showNotice = !this.showNotice
      // 当要切换为显示状态时 我们的滚动条应该要拉回到顶部
      if (this.showNotice) {
        // 原生BOM的方法 操作滚动条
        window.scrollTo(0, 0)
      }
    },
    // 电子书上传成功的回调
    onSuccess({ code, book }) {
      this.uploadLoading.close()
      if (code === 20000) {
        this.book = book
      }
    },
    // 文件上传失败触发的钩子
    onError() {
      this.uploadLoading.close()
    },
    // 删除上传文件列表时触发
    onRemove() {
      this.book = {}
      this.className = 'draft'
    },
    // 文件处于上传状态
    onProgress() {
      this.uploadLoading = this.$loading({
        lock: true,
        text: '电子书正在上传...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    // 电子书上传前的准备
    beforeBookUpload(file) {
      console.log(file.type)
      const isEpub = ['application/epub+zip', 'application/epub'].includes(file.type)
      const isLt5M = file.size / 1024 / 1024 < 25

      if (!isEpub) {
        this.$message.error('上传电子书只能是 epub 格式!')
      }
      if (!isLt5M) {
        this.$message.closeAll()
        this.$message.error('上传电子书大小不能超过 5MB!')
      }
      return isEpub && isLt5M
    },
    // 上传数量超出
    onExceed() {
      this.$message.error('每次只能上传一本电子书')
    }
  }
}
